/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 17:49:48
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-08-16 17:06:54
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import {
    DatePicker,
    Input,
    InputNumber,
    Menu,
    Modal,
    Button,
    Tooltip,
    Dropdown,
    Descriptions,
    Select,
    Space,
    Table,
    message,
    Tabs,
    Popconfirm,
    Checkbox,
    Card,
    Form,
    Collapse,
    Empty,
    Spin,
    List
} from "antd";
import { LeftOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import styled from "styled-components";
import _ from "lodash";
import { useNavigate, useParams, NavLink } from "react-router-dom";
import moment from "moment";
import copy from "copy-to-clipboard";
import { loading, noti, notiError, notiOK } from "../../utils/antd-helper";
import * as suture from "../../services/suture";
import store from "../../utils/store";
import { formatAddress } from "../../utils/formatter";
import { sleep } from "../../utils/common";
import { checkLogin } from "../../services/user";
import Item from "./components/Item";

let lock = false;
let accountType = "";
let spaceGb = 0;

function Main({ className }) {
    const navigate = useNavigate();
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(false);
    const [addr, setAddr] = useState();
    const [needPayTotal, setNeedPayTotal] = useState(0);
    const [avaliableDays, setAvaliableDays] = useState(30);
    const [isLoading, setIsLoading] = useState(false);

    const init = async () => {
        console.log('init');
        setIsLoading(true);
        let a = store.get("cess-addr");
        setAddr(a);
        if (!window.refreshSpace) {
            await sleep(1000);
        }
        let fun = window.refreshSpace || suture.territories;
        let ret = await fun();
        console.log('Territorys', ret);
        if (ret.msg != 'ok') {
            return;
        }
        let d = ret.data.map(t => {
            let per = (100 * t.usedSpace) / t.totalSpace;
            let o = {
                name: t.name, hash: formatAddress(t.key), total: t.totalSpaceStr, used: t.usedSpaceStr, per, expired: t.deadlineTime, state: t.state
            };
            return { ...t, ...o };

            /* state
                Active,   正常状态
                Frozen,  冻结状态，需要续租
                Expired, 过期状态，无法续租，只能重新激活
                OnConsignment,  寄售状态，无法干其他任何操作
            */
        });
        setList(d);
        setIsLoading(false);
    };
    useEffect(() => {
        let isLogin = checkLogin(navigate);
        if (isLogin) {
            init();
        }
    }, []);
    const refreshTerritory = async e => {
        setLoading(true);
        await suture.territoryRefresh();
        await init();
        setLoading(false);
    };

    return (
        <div className={className}>
            <Spin spinning={isLoading}>
                <div className="con">
                    <div className="t1">Territories</div>
                    <div className="t2">
                        <span>My territories({list.length}) <i className="refresh" onClick={refreshTerritory}>{loading ? "loading..." : "refresh"}</i></span>
                        <label onClick={() => navigate('/territory/new')}>Buy territory</label>
                    </div>
                    <div className="list">
                        {
                            list.length > 0 ? list.map(t => <Item key={t.name} className="item" territoryInfo={t} reload={init} />) : <div onClick={() => navigate('/territory/new')} className="none">Buy a new territory to manage your data !</div>
                        }
                    </div>
                </div>
            </Spin>
        </div>
    );
}

export default styled(Main)`
	width: 100%;
	.con {
		width: 800px;
		overflow: hidden;
		padding: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		margin: 0 auto;
        .refresh{
            font-size:12px;
            font-style: normal;
            color:#fff;
            padding-left:20px;
            cursor: pointer;
        }
		.t1 {
			color: rgb(51, 51, 51);
			line-height: 37px;
			margin-bottom: 60px;
			font-size: 36px;
			font-weight: bold;
		}
        .t2{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid #dddddd;
            margin-bottom: 10px;
            span{
                font-weight: bold;
                height: 50px;
                line-height: 50px;
            }
            label{
                width: 140px;
                height: 50px;
                line-height: 50px;
                border-radius: 5px;
                border: 1px solid #c3c3c3;
                background-color: rgba(51, 51, 51, 0);
                color: #000000;
                text-align: center;
                font-size: 16px;
                cursor: pointer;
                &:hover{
                    background-color: #ddd;
                }
            }
        }
        .list{
            width: 100%;
            display: flex;
            flex-direction: column;
            gap:10px;
            .none {
                display: block;
                height: 217px;
                border-radius: 5px;
                border: 1px dashed #c3c3c3;
                color: #333333;
                text-align: center;
                line-height: 217px;
                font-size:13px;
                overflow: hidden;
                cursor: pointer;
            }
        }
		
	}
`;
